// 绿色
[data-theme="light_green"] {
    /* 颜色变量 */
    --wason-green-50: #F3F6F6; /* 绿色50 */
    --btn-default-hover-bg: #7E9999; /* 按钮默认悬停背景 */
    --bg-color: var(--wason-green-50); /* 背景色 */
    --fg-color: #f5f5f5; /* 前景色 */
    --navbar-bg: #4ABDAC; /* 导航栏背景 */
    --fg-hover-color: #7E9999; /* 前景悬停颜色 */
    --card-bg: var(--wason-green-50); /* 卡片背景 */
    --disabled-control-bg: var(--wason-green-200); /* 禁用控件背景 */
    --control-bg: var(--wason-green-50); /* 控件背景 */
    --control-bg-on-gray: #AEB7C3; /* 灰色控件背景 */
    --awesomebar-focus-bg: var(--control-bg); /* 引人注目的背景 */
    --awesomplete-hover-bg: #3A5858; /* awesomplete悬停背景 */
    --sidebar-select-color: #7E9999; /* 侧边栏选择颜色 */
    --scrollbar-thumb-color: #7E9999; /* 滚动条拇指颜色 */
    --scrollbar-track-color: #d6e4e4; /* 滚动条轨道颜色 */
    --highlight-color: #CDD7DB; /* 高亮颜色 */
    --page-head-bg:#57BC90; /* 页面头部背景 */
    --background-color-bg: #77C9D4; /* 侧边菜单背景颜色*/
    /* 具体元素样式 */
    .page-head {
        background: var(--page-head-bg); /* 页面头部背景 */
        max-height: 55px;
    }
    .primary-action {
        background: #77555F; /* 主要操作背景 */
    }
    .list-row-head {
        background: #AEB7C3; /* 列表行头背景 */
    }
    .grid-heading-row {
        background: #DFDCE3; /* 网格标题行背景 */
    }
    .layout-main-section {
        //border: 1px solid #b9ddc1; /* 如果你还需要边框 */
        box-shadow: 8px 8px 10px rgba(166, 185, 219, 0.5); /* 阴影效果 */
    }
    .navbar {
        max-height: 55px;
    }
    .layout-main-section-wrapper {
        background-color: var(--navbar-bg);
    }
    .layout-side-section {
        background-color: var(--background-color-bg);
    }
    .std-form-layout > .form-layout > .form-page {
        border: 2px solid var(--border-color);
        box-shadow:5px 5px 10px rgba(0,0,0,0.2)
    }
    
    .form-message.blue {
        border: 2px solid var(--blue-100);
        color: #525252;
        background: #F7B733;
        box-shadow:1px 1px 6px rgba(0,0,0,0.3)
    }
    ;
    .widget.links-widget-box {
        box-shadow:1px 1px 6px rgba(0,0,0,0.3);
        background-color: #dfdce3;
      }
    
    .widget.shortcut-widget-box {
        padding: 6px 15px;
        box-shadow:1px 1px 6px rgba(0,0,0,0.3);
        background-color: #dfdce3;
    }
    
    .grid-row > .row .col:last-child, .form-section .grid-row > .section-body .col:last-child,
    .form-dashboard-section .grid-row > .section-body .col:last-child, .grid-row > .dialog-assignment-row .col:last-child {
      border-right: none;
      min-width: 0;
      border: 1px solid #57BC90;
    }
    
    .grid-row > .row .col, .form-section .grid-row > .section-body .col, .form-dashboard-section .grid-row > .section-body .col, .grid-row > .dialog-assignment-row .col {
        padding: var(--grid-padding);
        border: 1px solid #57BC90;
    }
}

// 橙色
[data-theme="orange_sunset"] {
    /* 主题颜色 */
    --background-color: #ffab40; /* 背景颜色 */
    --primary-color: #c66900; /* 主要颜色 */
    --secondary-color: #ffcd80; /* 次要颜色 */
    --white-color: #FFFFFF; /* 白色 */
    --black-color: #000000; /* 黑色 */
    --gray-color: #d1d8dd; /* 灰色 */

    /* 控件样式 */
    --bg-color: #fffdf9; /* 背景色  #f9eed8*/
    --text-bold: 600; /* 文本加粗 */
    --control-bg: #ffa94d6e; /* 控件背景 */
    --control-bg-on-gray: #d4dcea; /* 灰色背景上的控件背景 */
    --disabled-control-bg: #f9eed8; /* 禁用的控件背景 */
    --heading-color: #333; /* 标题颜色 */
    --border-color: #e3e8f1; /* 边框颜色 */
    --avatar-frame-bg: #dde2ea; /* 头像框背景 */
    --margin-lg: 15px; /* 大间距 */
    --sidebar-select-color: #ffab4030; /* 侧边栏选中颜色 */
    --awesomplete-hover-bg: #d4dcea; /* awesomplete悬停背景 */
    --scroll-bg: #ccc; /* 滚动条背景 */
    --scroll-color: var(--secondary-color); /* 滚动条颜色 */

    --fg-hover-color: #ffcd80; /* 前景悬停颜色 */
    --btn-default-hover-bg: #FF7E4A; /* 默认悬停背景色 */
    --highlight-color: #fdebd3; /* 高亮颜色 */

    /* 具体元素样式 */
    .navbar {
        background: #ff964f; /* 导航栏背景 */
        max-height: 55px;
    }
    .page-head {
        background: #ffcc80; /* 页面头部背景 */
        max-height: 55px;
    }
    .primary-action {
        background: #9C2410; /* 主要操作背景 */
    }
    .list-row-head {
        background: #ffd699; /* 列表行头背景 */
    }
    .grid-heading-row {
        background: #ffcc80; /* 网格标题行背景 */
    }
    .form-control .input-xs  {
        background: #ffb74d; /* 表格控件输入 */
    }
    .form-grid .grid-row:hover {
        background: #ffcc80; /* 表格行移动 */
    }
    .layout-main-section {
        border: 1px solid #ffe8c2; /* 如果你还需要边框 */
        box-shadow: 8px 8px 10px rgb(225 183 123 / 50%); /* 阴影效果 */
    }
}

// 蓝色
[data-theme="azure_blue"] {
    /* 主题颜色 */
    --background-color: #5199cd; /* 背景颜色 */
    --primary-color: #a62e2e; /* 主要颜色 */
    --secondary-color: #27567b; /* 次要颜色 */
    --white-color: #FEFFF0; /* 白色 */
    --black-color: #000000; /* 黑色 */
    --gray-color: #d1d8dd; /* 灰色 */

    /* 控件样式 */
    --bg-color: #f2f5fa; /* 背景色 */
    --text-bold: 600; /* 文本加粗 */
    --control-bg: #cbe0f46e; /* 控件背景 */
    --control-bg-on-gray: #d4dcea; /* 灰色背景上的控件背景 */
    --disabled-control-bg: #f2f5fa; /* 禁用的控件背景 */
    --heading-color: #333; /* 标题颜色 */
    --border-color: #e3e8f1; /* 边框颜色 */
    --avatar-frame-bg: #dde2ea; /* 头像框背景 */
    --margin-lg: 15px; /* 大间距 */
    --sidebar-select-color: #2490ef30; /* 侧边栏选中颜色 */
    --awesomplete-hover-bg: #d4dcea; /* awesomplete悬停背景 */
    --scroll-bg: #ccc; /* 滚动条背景 */
    --scroll-color: var(--secondary-color); /* 滚动条颜色 */

    --fg-hover-color: #c0e1ed; /* 前景悬停颜色 */
    --btn-default-hover-bg: #7E9999; /* 默认悬停背景色 */
    --highlight-color: #cbdceb; /* 高亮颜色 */

    /* 具体元素样式 */
    .navbar {
        background: #72a9d1; /* 导航栏背景 */
        max-height: 55px;
    }
    .page-head {
        background: #dfeafc; /* 页面头部背景 */
        max-height: 55px;
    }
    .primary-action {
        background: #77555F; /* 主要操作背景 */
    }
    .list-row-head {
        background: #cee1fa; /* 列表行头背景 */
    }
    .grid-heading-row {
        background: #b8d4ed; /* 网格标题行背景 */
    }
    .form-control .input-xs  {
        background: #85a7c4; /* 表格控件输入 */
    }
    .form-grid .grid-row:hover {
        background: #b8d4ed; /* 表格行移动 */
    }
    .layout-main-section {
        border: 1px solid #a4d5ff; /* 如果你还需要边框 */
        box-shadow: 8px 8px 10px rgba(166, 185, 219, 0.5); /* 阴影效果 */
    }
}

[data-theme="dark"] {

    /* 具体元素样式 */
    .navbar {
        max-height: 55px;
    }
    .page-head {
        max-height: 55px;
    }

}

[data-theme="light"] {

    /* 具体元素样式 */
    .navbar {
        max-height: 55px;
    }
    .page-head {
        max-height: 55px;
    }

}